<template>
	<view class="container">
		<!-- 背景图 -->
		<image class="background-image" src="/static/image-my/Frame 9529.png" mode="scaleToFill"></image>

		<!-- 用户信息区域 -->
		<view class="user-info" @click="handleUserClick">
			<view class="avatar-section">
				<image class="avatar" :src="userInfo.avatar || '/static/image-my/Group 11095.png'" mode="aspectFill">
				</image>

				<view style="margin-left: 20rpx;">
					<view class="user-name">{{userInfo.nickname || '登录/注册'}}
						<image v-if="isLoggedIn" class="vip-icon" src="/static/image-my/Frame@2x(6).png"
							mode="aspectFit" @click="handleUserClicks"></image>
					</view>
					<view class="user-id">{{isLoggedIn ? 'ID: ' + userInfo.id : '登录后获取更多功能信息'}}</view>
				</view>
			</view>
		</view>

		<!-- 菜单列表 -->
		<view class="menu-list">
			<view class="menu-item" v-for="item in menuItems" :key="item.name" @click="navigateTo(item.url)">
				<text>{{item.name}}</text>
				<uni-icons type="right" size="22" color="rgb(130, 136, 159)"></uni-icons>
			</view>
		</view>

		<!-- 微信一键登录弹窗 -->
		<uni-popup ref="loginPopup" type="bottom" :mask-click="false">
			<view class="login-popup">
				<view class="popup-content">
					<button class="login-btn" @click="navigateToLoginPage">
						<!-- <image src="/static/wechat-icon.png" mode="aspectFit" class="wechat-icon"></image> -->
						<text>手机号登录</text>
					</button>

					<view class="agreement">
						<checkbox-group @change="toggleAgreement">
							<label>
								<checkbox :checked="agreed" color="#07C160" style="transform:scale(0.7)" />
								<text>我已阅读并同意</text>
							</label>
						</checkbox-group>
						<view class="agreement-links">
							<text class="link" @click="showAgreement">《启点直播协议》</text>
							<text>及</text>
							<text class="link" @click="showPrivacy">《个人信息保护政策》</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
	import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

	export default {
		components: {
			uniPopup,
			uniIcons
		},
		data() {
			return {
				userInfo: {},
				agreed: false,
				menuItems: [
					// {
					// 	name: '绑定手机号',
					// 	url: '/pages/profile/profile'
					// },

					// {
					// 	name: '我的收益',
					// 	url: '/pages/about/about'
					// },
					{
						name: '观看记录',
						url: '/pages/about/about'
					},
					{
						name: '我的关注',
						url: '/pages/follow/follow'
					},
					{
						name: '主播中心',
						url: '/pages/center/center'
					},
					{
						name: '账户安全',
						url: '/pages/settings/settings'
					},
				]
			}
		},
		computed: {
			isLoggedIn() {
				// 判断用户是否登录，这里假设有id且不为'000000'表示已登录
				return this.userInfo.id && this.userInfo.id !== '000000';
			}
		},
		onLoad() {
			this.loadUserInfo();
			uni.$on('updateUserInfo', this.handleUserInfoUpdate);
		},
		onUnload() {
			uni.$off('updateUserInfo', this.handleUserInfoUpdate);
		},
		methods: {
			loadUserInfo() {
				this.userInfo = uni.getStorageSync('userInfo') || {};
			},
			handleUserInfoUpdate(userInfo) {
				this.userInfo = userInfo;
			},
			navigateTo(url) {
				uni.navigateTo({
					url
				});
			},
			handleUserClick() {
				if (!this.userInfo.id || this.userInfo.id === '000000') {
					this.$refs.loginPopup.open();
				}
			},
			handleUserClicks() {
				uni.navigateTo({
					url: '/pages/Personal/Personal?user=' + encodeURIComponent(JSON.stringify(this.userInfo))
				});
			},
			navigateToLoginPage() {
				if (!this.agreed) {
					uni.showToast({
						title: '请先同意用户协议',
						icon: 'none'
					});
					return;
				}
				this.closeLoginPopup();
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			toggleAgreement(e) {
				this.agreed = e.detail.value.length > 0;
			},
			closeLoginPopup() {
				this.$refs.loginPopup.close();
			},
			showAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/agreement?type=service'
				});
			},
			showPrivacy() {
				uni.navigateTo({
					url: '/pages/agreement/agreement?type=privacy'
				});
			}
		}
	}
</script>

<style>
	.container {
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
		height: 100vh;
	}

	.background-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 400rpx;
		z-index: 0;
	}

	.user-info {
		position: relative;
		z-index: 1;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.menu-list {
		height: 100vh;
		position: relative;
		z-index: 1;
		background-color: #fff;
		margin: 0 30rpx;
		border-radius: 25rpx 25rpx 0 0;
		box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.08);
	}

	.avatar-section {
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.vip-icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}

	.user-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: black;
		display: flex;
		align-items: center;
	}

	.user-id {
		font-size: 28rpx;
		color: rgb(176, 184, 187);

	}

	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		font-size: 32rpx;
		color: rgb(60, 60, 60);
		font-weight: 500;
	}

	.login-popup {
		background-color: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 40rpx;
		/* padding-bottom: calc(40rpx + env(safe-area-inset-bottom)); */
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* margin-bottom: 40rpx; */
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.popup-content {
		padding: 5vh 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login-btn {
		width: 80%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #07C160;
		color: #fff;
		font-size: 32rpx;
		border-radius: 12rpx;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wechat-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.agreement {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #999;
	}

	.agreement-links {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}

	.link {
		color: #07C160;
		margin: 0 5rpx;
	}
</style>